import { DeleteOutlined, PlusCircleOutlined } from '@ant-design/icons';
import { Row, Col, Input, Form, Tooltip, Select } from 'antd';

export default function ColorManager({ sizes }: any) {
  return (
    <Row gutter={16}>
      <Form.List name="sizePrice">
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name }) => {
              return (
                <Col span={8} key={key} style={{ display: 'flex', marginBottom: 16, gap: 10 }} >
                  <Form.Item<any> label="" name={[name, 'size']} style={{ width: '80px' }} className='!mb-[0]'>
                    <Select options={sizes} />
                  </Form.Item>
                  <Form.Item<any> label="" name={[name, 'price']} className='!mb-[0]'>
                    <Input suffix="元" />
                  </Form.Item>
                  <Tooltip placement="top" title="删除此行">
                    <DeleteOutlined onClick={() => remove(name)} />
                  </Tooltip>
                </Col>
              );
            })}
            <Tooltip placement="top" title="新增一行">
              <PlusCircleOutlined onClick={() => add()} />
            </Tooltip>
          </>
        )}
      </Form.List>
    </Row>
  );
}
